<template>
	<view class="funds_detail_box">
		<view class="funds_detail_top_bg">
			<text class="interest_rate_value">{{storeData.sevenDaysYearIncome}}</text>
			<view class="day_annualized_rate">七日年化收益率(%)</view>
			<view class="thousands_of_income_box">
				<view class="left_thousands_of_income">
					<text class="big_text">{{storeData.millionCopiesIncome}}</text>
					<text class="small_text">万份收益(02-26)</text>
				</view>
				<view class="left_thousands_of_income">
					<text class="big_text">100.00</text>
					<text class="small_text">起购金额</text>
				</view>
			</view>
		</view>
		<view class="funds_detail_middle_box">
			<view class="first_title_view">
				<text class="title_big_text">{{chartData.series[0].name}}</text>
				<image class="next_image" src="../../static/funds/right.png"></image>
			</view>
			<view class="tubiao_box">
				<view class="charts-box">
					<qiun-data-charts type="line" :chartData="chartData" background="none" :ontap="false"
						:onmouse="false" />
				</view>
				<view class="tab_text_box">
					<text class="model_tab_text" v-for="item in titleData" :key="item.id" @tap="chooseTitle(item.id,item.meta)"
						:class="{active_text:item.isShow}">{{item.name}}</text>
				</view>
			</view>
			<view class="tab_Information">
				<text @tap="changeTab(1)" class="tb_Information_txt"
					:class="{ active_show: currentTab == 1 }">基金档案</text>
				<text @tap="changeTab(2)" class="tb_Information_txt"
					:class="{ active_show: currentTab == 2 }">交易规则</text>
				<text @tap="changeTab(3)" class="tb_Information_txt"
					:class="{ active_show: currentTab == 3 }">常见问题</text>
			</view>

			<view v-if="currentTab == 1" class="Basic_Information_box">
				<view class="base_text_box">
					<view class="model_base_text">
						<text class="qian_text">基本信息</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金全称</text>
						<text class="bold_text">{{storeData.name}}</text>
					</view>

					<view class="model_base_text">
						<text class="qian_text">基金代码</text>
						<text class="bold_text">{{storeData.code}}</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金类型</text>
						<text class="bold_text">{{storeData.type}}(低风险)</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金状态</text>
						<text class="bold_text">开放交易</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">成立日期</text>
						<text class="bold_text">{{storeData.dateOfEstablishment}}</text>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金经理</text>
						<text class="bold_text">{{storeData.manager}}</text>
						<image class="next_image" src="../../static/funds/right.png"></image>
					</view>
					<view class="model_base_text">
						<text class="qian_text">基金公司</text>
						<text class="bold_text">{{storeData.company}}</text>
						<image class="next_image" src="../../static/funds/right.png"></image>
					</view>
				</view>

				<view class="first_title_view">
					<text>资产配置</text>
				</view>

				<view class="property_ring_box">
					<view class="left_xian_box">
						<view class="small_title_txt">
							<text class="lan_xian"></text>
							<text>债券77.62%</text>
						</view>
						<view class="small_title_txt">
							<text class="zi_xian"></text>
							<text>股票17.88%</text>
						</view>
					</view>
					<view class="charts-box">
						<qiun-data-charts type="myRing" :chartData="chartDataRing" background="none" :animation="false"
							:tooltipShow="false" :tooltipCustom="tooltipCustom" :tapLegend="false" :ontap="false"
							:onmouse="false" />
					</view>
					<view class="right_xian_box">
						<view class="small_title_txt">
							<text class="lv_xian"></text>
							<text>现金1.79%</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentTab == 2" class="Trading_Rules_box">
				<view class="pay_rules">
					<view class="title">购买规则</view>
					<image class="dian_5" src="../../static/funds/dian5.png" mode=""></image>
					<view class="rules_text">
						<view class="rules_model">
							<text class="hong">T日15点前</text>
							<text>购买</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+1日17点后</text>
							<text>确认份额</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+2日</text>
							<text>查看收益</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+2日起</text>
							<text>可赎回</text>
						</view>
					</view>
					<view class="desc_text">*T日为交易日。周末和法定节假日不属于T日看在节假日或15点后购买，将于下一个T日生效。确认份额等时间点都将顺延一个T日</view>
					<view class="table_box">
						<view class="left">
							<view class="th">金额(元)</view>
							<view class="td">0≤金额{{ fuhao }}100万</view>
							<view class="td">100万≤金额{{ fuhao }}200万</view>
							<view class="td">200万≤金额{{ fuhao }}500万</view>
							<view class="td">金额≥500万</view>
						</view>
						<view class="right">
							<view class="th">费用</view>
							<view class="td">
								<text class="under">1.5%</text>
								<text>0.6%</text>
							</view>
							<view class="td">
								<text class="under">1%</text>
								<text>0.6%</text>
							</view>
							<view class="td">
								<text class="under">0.3%</text>
								<text>0.3%</text>
							</view>
							<view class="td">
								<text class="under">1000元</text>
								<text>1000元</text>
							</view>
						</view>
					</view>
				</view>

				<view class="pay_rules">
					<view class="title">赎回规则</view>
					<image class="dian_5" src="../../static/funds/dian3.png"></image>
					<view class="rules_text">
						<view class="rules_model">
							<text class="hong">T日15点前</text>
							<text>赎回</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+1日17点后</text>
							<text>确认份额及到账金额</text>
						</view>
						<view class="rules_model">
							<text class="hong">T+2日</text>
							<text>24点前到账</text>
						</view>
					</view>
					<view class="desc_text">*T日为交易日。周末和法定节假日不属于T日看在节假日或15点后购买，将于下一个T日生效。确认份额等时间点都将顺延一个T日</view>
					<view class="table_box">
						<view class="left">
							<view class="th">持有时间</view>
							<view class="td">7天≤持有期限{{ fuhao }}365天</view>
							<view class="td">1年≤持有期限{{ fuhao }}2年</view>
							<view class="td">持有期限≥2年</view>
							<view class="td">0天≤持有期限{{ fuhao }}7天</view>
						</view>
						<view class="right">
							<view class="th">费用</view>
							<view class="td">
								<text>0.50%</text>
							</view>
							<view class="td">
								<text>0.25%</text>
							</view>
							<view class="td">
								<text>0.00%</text>
							</view>
							<view class="td">
								<text>1.50%</text>
							</view>
						</view>
					</view>
				</view>

				<view class="pay_rules">
					<view class="title">运作费用</view>
					<view class="table_box">
						<view class="left">
							<view class="td no_under">管理费</view>
							<view class="td">托管费</view>
							<view class="td">销售服务费</view>
						</view>
						<view class="right">
							<view class="td no_under">
								<text>1.50%</text>
							</view>
							<view class="td">
								<text>0.25%</text>
							</view>
							<view class="td">
								<text>--</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="currentTab == 3" class="common_problem_box">
				<view class="btn_box">
					<view class="btn">什么是基金?</view>
				</view>
				<view class="text">
					基金（全称证券投资基金)是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益、共担风险
				</view>
			</view>

			<view class="detail_footer_text">
				<view class="txt">基金销售服务由成都宇宁基金销售有限公司提供</view>
				<view class="txt">投资前靖详纽阅读基金合同，招募说明韦。基金的过往业绩不预示其未来表现,巿场有凤险。投资需逆慎</view>
			</view>
		</view>
		<!-- <view class="detail_footer_box">
            <payCtn></payCtn>
        </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fuhao: "<",
				currentTab: 1,
				chartData: {
					categories: ["2020-08-04", "2020-08-16", "2020-09-07"],
					series: [{
						name: "近一月",
						data: [1.79, 1.757, 1.981],
					}],
				},
				chartDataRing: {
					series: [{
						data: [{
								name: "债券",
								value: 77.62,
							},
							{
								name: "现金",
								value: 1.79,
							},
							{
								name: "股票",
								value: 17.88,
							},
						],
					}, ],
				},

				tooltipCustom: {
					x: 10,
					y: 10,
					index: 2,
					textList: [{
						text: "自定义文字",
						color: "#EE6666",
					}, ],
				},
				storeData: {},
				chartAllData: [],
				titleData: [{
						id: 0,
						name: '分时',
						meta: "近三月七日年化利率曲线",
						isShow: false
					},
					{
						id: 1,
						name: '近一月',
						meta: "近三十天七日年化利率曲线",
						isShow: true
					},
					{
						id: 2,
						name: '近半年',
						meta: "近半年七日年化利率曲线",
						isShow: false
					},
					{
						id: 3,
						name: '近一年',
						meta: "近一年七日年化利率曲线",
						isShow: false
					},

				]
			};
		},
		created() {
			this.getData()
		},
		methods: {
			changeTab(num) {
				this.currentTab = num;
			},
			chooseTitle(id = 1, name = "近三十天七日年化利率曲线") { //点击标题切换echart表
				// console.log(id,name);
				for (let i = 0; i < this.titleData.length; i++) {
					this.titleData[i].isShow = false
				}
				this.titleData[id].isShow = true //切换class样式

				console.log(`此时所有的echart数据------`, this.chartAllData);
				//筛选出此时选择的列表数据
				let nowData = this.chartAllData.filter(item => item.series[0].name == name)
				// console.log(`此时的列表数据============`, nowData);

				/*
				 由于数据太多无法展示完 只能选择第一个 最后一个 加中间1个，总共3个
				 */
				let chartX = [] //X轴数据 
				let chartY = [] //Y轴数据

				chartX[0] = nowData[0].categories[0] //X轴第一个数据
				chartX[2] = nowData[0].categories[nowData[0].categories.length - 1] //X轴最后一个数据
				chartX[1] = nowData[0].categories[Number(parseInt(nowData[0].categories.length / 3))]
				chartY[0] = nowData[0].series[0].data[0] * 1 //Y轴第一个数据
				chartY[2] = nowData[0].series[0].data[nowData[0].series[0].data.length - 1] * 1 //Y轴最后一个数据
				chartY[1] = nowData[0].series[0].data[Number(parseInt(nowData[0].series[0].data.length / 3))] * 1


				this.chartData.categories = chartX //X轴赋值
				// this.chartData.series.data = chartY //Y轴数据
				const series = [{
					name: nowData[0].series[0].name,
					data: chartY,
				}] //改变地址
				this.chartData.series = series
				// this.chartData.series.name = nowData[0].series[0].name //Y轴名字
				this.chartData.series.name = nowData[0].series[0].name //Y轴名字
				// console.log(`此时的Y轴-------`, chartY);
				// console.log(`此时的x轴-------`, chartX);
				// const chartData=


			},
			async getData() {
				const code = this.$store.state.currentDetail
				console.log(`进到此页面获取到的基金详情=======`, code);

				const res = await this.$api.current.getChartData(code)
				if (res.code == 200) {
					this.chartAllData = res.data.lineData //将列表的值赋值到本地
					this.storeData = res.data.currentFundInfo //将获取到本地仓库的值赋值到本地，并且获取列表数据
					// this.chooseTitle()//默认选中
				}
				console.log(`获取此时的结果=======`, res);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.funds_detail_box {
		width: 750rpx;
		background-repeat: no-repeat;
		background-size: 100%;
		background-image: url("../../static/funds/bg.png");
		background-color: #f8f8f8;
		overflow: scroll;
		padding-bottom: 100rpx;

		.funds_detail_top_bg {
			height: 330rpx;
			font-size: 0rpx;
			box-sizing: border-box;
			padding-top: 50rpx;
			text-align: center;

			.interest_rate_value {
				color: white;
				font-size: 60rpx;
				font-weight: bold;
				line-height: 40rpx;
			}

			.day_annualized_rate {
				color: #ffffff;
				font-size: 24rpx;
				margin-top: 30rpx;
			}

			.thousands_of_income_box {
				display: flex;
				justify-content: space-around;
				margin-top: 40rpx;

				.left_thousands_of_income {
					display: flex;
					flex-direction: column;

					.big_text {
						font-size: 40rpx;
						font-weight: bold;
						color: white;
					}

					.small_text {
						font-size: 24rpx;
						color: #ffffff;
					}
				}
			}
		}

		.funds_detail_middle_box {
			border-radius: 40rpx;
			background-color: #f8f8f8;
			padding-top: 45rpx;
			padding-left: 25rpx;
			padding-right: 25rpx;
			box-sizing: border-box;

			.first_title_view {
				height: 25rpx;
				box-sizing: border-box;
				border-left: 7rpx solid $uni-global-color-theme;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				padding-left: 13rpx;

				.next_image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.tubiao_box {
				margin-top: 35rpx;
				height: 550rpx;
				background-color: white;
				border-radius: 10rpx;

				.charts-box {
					height: 430rpx;
				}

				.tab_text_box {
					width: 620rpx;
					height: 50rpx;
					margin-top: 40rpx;
					border: 1px solid #f3f3f3;
					border-right: none;
					margin: 40rpx auto;
					display: flex;

					.model_tab_text {
						width: 155rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						color: #aeaeae;
						font-size: 30rpx;
						border-right: 1rpx solid #f3f3f3;
						background-color: white;
					}

					.active_text {
						color: white;
						background-color: $uni-global-color-theme;
					}
				}
			}

			.tab_Information {
				margin-top: 48rpx;
				height: 60rpx;
				font-size: 30rpx;
				color: #aeaeae;

				.tb_Information_txt {
					margin-right: 60rpx;
				}

				.active_show {
					font-size: 35rpx;
					font-weight: bold;
					color: $uni-global-color-theme;
					position: relative;

					&::after {
						content: "";
						display: inline-block;
						position: absolute;
						border-radius: 5rpx;
						width: 50rpx;
						height: 10rpx;
						background-color: $uni-global-color-theme;
						bottom: -15rpx;
						left: 50%;
						margin-left: -25rpx;
					}
				}
			}

			// 基金档案
			.Basic_Information_box {
				margin-top: 35rpx;

				.base_text_box {
					border-radius: 20rpx;
					height: 640rpx;
					background-color: white;
					box-sizing: border-box;
					padding-left: 34rpx;
					padding-right: 34rpx;
					margin-bottom: 40rpx;

					.model_base_text:last-child {
						border-bottom: none;
					}

					.model_base_text {
						height: 80rpx;
						line-height: 80rpx;
						border-bottom: 1rpx solid #f7f7f7;
						box-sizing: border-box;
						position: relative;

						.next_image {
							width: 48rpx;
							height: 48rpx;
							position: absolute;
							right: 0rpx;
							top: 50%;
							margin-top: -24rpx;
						}

						.qian_text {
							font-size: 26rpx;
							color: #aeaeae;
							margin-right: 30rpx;
						}

						.bold_text {
							font-size: 26rpx;
							color: #333333;
						}
					}
				}

				.property_ring_box {
					height: 270rpx;
					background-color: white;
					border-radius: 20rpx;
					margin-top: 24rpx;
					display: flex;
					align-items: center;

					.charts-box {
						width: 234rpx;
						height: 234rpx;
					}

					.small_title_txt {
						font-size: 24rpx;
						color: #999999;
						height: 25rpx;
						line-height: 25rpx;
					}

					.lan_xian {
						display: inline-block;
						height: 18rpx;
						margin-right: 10rpx;
						width: 6rpx;
						vertical-align: middle;
						background-color: $uni-global-color-theme;
					}

					.zi_xian {
						display: inline-block;
						height: 18rpx;
						margin-right: 10rpx;
						width: 6rpx;
						vertical-align: middle;
						background-color: #b26cf4;
					}

					.lv_xian {
						display: inline-block;
						height: 18rpx;
						margin-right: 10rpx;
						width: 6rpx;
						vertical-align: middle;
						background-color: #53b6c8;
					}

					.left_xian_box {
						height: 270rpx;
						width: 224rpx;
						margin-right: 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: flex-end;
					}

					.right_xian_box {
						width: 246rpx;
						height: 270rpx;
						padding-top: 178rpx;
						box-sizing: border-box;
						margin-left: 40rpx;
					}
				}
			}

			//基金规则
			.Trading_Rules_box {
				margin-top: 35rpx;

				.pay_rules {
					border-radius: 20rpx;
					background-color: white;
					box-sizing: border-box;
					padding-left: 20rpx;
					padding-right: 20rpx;
					font-size: 0rpx;
					padding-bottom: 30rpx;
					margin-bottom: 40rpx;

					.title {
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
						color: #999999;
					}

					.dian_5 {
						width: 650rpx;
						height: 20rpx;
						margin-bottom: 20rpx;
					}

					.rules_text {
						display: flex;
						justify-content: space-between;

						.rules_model {
							display: flex;
							flex-direction: column;
							font-size: 24rpx;
							align-items: center;
							height: 40rpx;
							justify-content: space-between;

							.hong {
								color: #f96b6b;
							}
						}
					}

					.desc_text {
						margin-top: 50rpx;
						margin-bottom: 40rpx;
						font-size: 26rpx;
						color: #999999;
					}

					.table_box {
						border-radius: 10rpx;
						border: 1rpx solid #f5f5f5;
						display: flex;

						.left {
							width: 400rpx;

							.td.no_under {
								border-top: none;
							}

							.th {
								width: 400rpx;
								height: 80rpx;
								line-height: 80rpx;
								text-align: center;
								font-size: 28rpx;
								font-weight: bold;
								background-color: #eaf1fe;
							}

							.td {
								width: 400rpx;
								font-size: 28rpx;
								color: #999999;
								height: 80rpx;
								line-height: 80rpx;
								text-align: center;
								border-top: 1rpx solid #f8f8f8;
							}
						}

						.right {
							flex-grow: 1;
							border-left: 1rpx solid #f5f5f5;

							.td.no_under {
								border-top: none;
							}

							.th {
								width: 100%;
								height: 80rpx;
								line-height: 80rpx;
								text-align: center;
								font-size: 28rpx;
								font-weight: bold;
								background-color: #eaf1fe;
							}

							.td {
								width: 100%;
								font-size: 28rpx;
								color: #999999;
								height: 80rpx;
								line-height: 80rpx;
								text-align: center;
								border-top: 1rpx solid #f8f8f8;

								.under {
									font-size: 24rpx;
									text-decoration: line-through;
									margin-right: 5rpx;
								}
							}
						}
					}
				}
			}

			//常见问题
			.common_problem_box {
				height: 470rpx;
				background-color: white;
				border-radius: 20rpx;
				margin-top: 35rpx;
				box-sizing: border-box;
				padding-left: 25rpx;
				padding-right: 25rpx;

				.btn_box {
					height: 150rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.btn {
						width: 215rpx;
						height: 85rpx;
						background-color: $uni-global-color-theme;
						color: white;
						font-size: 28rpx;
						line-height: 85rpx;
						text-align: center;
						border-radius: 15rpx;
					}
				}

				.text {
					box-sizing: border-box;
					padding: 30rpx;
					border-radius: 20rpx;
					font-size: 28rpx;
					height: 295rpx;
					border: 1rpx solid #f5f5f5;
					color: #999999;
					line-height: 50rpx;
				}
			}

			.detail_footer_text {
				margin-top: 35rpx;
				font-size: 22rpx;
				color: #848484;
				padding-bottom: 40rpx;

				.txt {
					line-height: 35rpx;
				}
			}
		}

		.detail_footer_box {
			position: fixed;
			bottom: 0rpx;
			height: 100rpx;
			width: 750rpx;
			background-color: white;
			z-index: 3;
			display: flex;

			.model_item {
				width: 120rpx;
				height: 100rpx;
				border-right: 1rpx solid #f7f7f7;
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.collect_img {
					width: 45rpx;
					height: 45rpx;
				}

				.footer_text {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.definite_btn {
				width: 240rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background-color: #e2bc7f;
				color: white;
				font-size: 35rpx;
			}

			.go_pay_btn {
				flex-grow: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				background-color: $uni-global-color-theme;
				color: white;
				font-size: 35rpx;
			}
		}
	}
</style>
